<script setup>
import { ref, onMounted } from 'vue';
import BaseLayout from '@/views/layout/BaseLayout.vue';

const isLoaded = ref(false);
const activeSection = ref('account');

const setActiveSection = (section) => {
  activeSection.value = section;
};

onMounted(() => {
  setTimeout(() => {
    isLoaded.value = true;
  }, 300);
});
</script>

<template>
  <BaseLayout>
    <div class="settings-container" :class="{ 'loaded': isLoaded }">
      <div class="settings-header">
        <h1 class="page-title">设置</h1>
        <p class="page-subtitle">管理您的账户设置和偏好</p>
      </div>
      
      <div class="settings-content">
        <div class="settings-sidebar">
          <div 
            class="sidebar-item" 
            :class="{ 'active': activeSection === 'account' }"
            @click="setActiveSection('account')"
          >
            <i class="fas fa-user-circle"></i>
            <span>账户设置</span>
          </div>
          <div 
            class="sidebar-item" 
            :class="{ 'active': activeSection === 'security' }"
            @click="setActiveSection('security')"
          >
            <i class="fas fa-shield-alt"></i>
            <span>安全与隐私</span>
          </div>
          <div 
            class="sidebar-item" 
            :class="{ 'active': activeSection === 'notifications' }"
            @click="setActiveSection('notifications')"
          >
            <i class="fas fa-bell"></i>
            <span>通知设置</span>
          </div>
          <div 
            class="sidebar-item" 
            :class="{ 'active': activeSection === 'preferences' }"
            @click="setActiveSection('preferences')"
          >
            <i class="fas fa-sliders-h"></i>
            <span>偏好设置</span>
          </div>
        </div>
        
        <div class="settings-main">
          <!-- 账户设置 -->
          <div v-if="activeSection === 'account'" class="settings-section">
            <h2 class="section-title">账户设置</h2>
            
            <div class="form-group">
              <label>用户名</label>
              <input type="text" placeholder="您的用户名">
            </div>
            
            <div class="form-group">
              <label>电子邮箱</label>
              <input type="email" placeholder="您的电子邮箱">
              <div class="hint">此邮箱地址将用于接收重要通知</div>
            </div>
            
            <div class="form-group">
              <label>手机号码</label>
              <input type="tel" placeholder="您的手机号码">
            </div>
            
            <button class="save-btn">保存更改</button>
          </div>
          
          <!-- 安全与隐私 -->
          <div v-if="activeSection === 'security'" class="settings-section">
            <h2 class="section-title">安全与隐私</h2>
            
            <div class="form-group">
              <label>更改密码</label>
              <input type="password" placeholder="当前密码">
              <input type="password" placeholder="新密码" class="mt-3">
              <input type="password" placeholder="确认新密码" class="mt-3">
            </div>
            
            <div class="form-group toggle-group">
              <label>双重认证</label>
              <div class="toggle-switch">
                <input type="checkbox" id="toggle-2fa">
                <label for="toggle-2fa"></label>
              </div>
              <div class="hint">启用双重认证后，登录时需要额外的验证步骤</div>
            </div>
            
            <div class="form-group toggle-group">
              <label>隐私设置</label>
              <div class="toggle-switch">
                <input type="checkbox" id="toggle-privacy" checked>
                <label for="toggle-privacy"></label>
              </div>
              <div class="hint">允许我们使用您的数据提供个性化服务</div>
            </div>
            
            <button class="save-btn">保存更改</button>
          </div>
          
          <!-- 通知设置 -->
          <div v-if="activeSection === 'notifications'" class="settings-section">
            <h2 class="section-title">通知设置</h2>
            
            <div class="notification-group">
              <div class="notification-item">
                <div class="notification-info">
                  <h3>电子邮件通知</h3>
                  <p>接收重要更新、订单确认和促销信息</p>
                </div>
                <div class="toggle-switch">
                  <input type="checkbox" id="toggle-email" checked>
                  <label for="toggle-email"></label>
                </div>
              </div>
              
              <div class="notification-item">
                <div class="notification-info">
                  <h3>短信通知</h3>
                  <p>接收旅行提醒和重要更新</p>
                </div>
                <div class="toggle-switch">
                  <input type="checkbox" id="toggle-sms">
                  <label for="toggle-sms"></label>
                </div>
              </div>
              
              <div class="notification-item">
                <div class="notification-info">
                  <h3>促销信息</h3>
                  <p>接收关于特价优惠和新产品的信息</p>
                </div>
                <div class="toggle-switch">
                  <input type="checkbox" id="toggle-promo" checked>
                  <label for="toggle-promo"></label>
                </div>
              </div>
            </div>
            
            <button class="save-btn">保存更改</button>
          </div>
          
          <!-- 偏好设置 -->
          <div v-if="activeSection === 'preferences'" class="settings-section">
            <h2 class="section-title">偏好设置</h2>
            
            <div class="form-group">
              <label>默认语言</label>
              <select>
                <option value="zh">中文</option>
                <option value="en">英文</option>
              </select>
            </div>
            
            <div class="form-group">
              <label>旅行偏好</label>
              <select>
                <option value="">请选择旅行偏好</option>
                <option value="nature">自然风光</option>
                <option value="culture">历史文化</option>
                <option value="food">美食体验</option>
                <option value="adventure">冒险探索</option>
                <option value="relaxation">休闲放松</option>
              </select>
            </div>
            
            <button class="save-btn">保存更改</button>
          </div>
        </div>
      </div>
    </div>
  </BaseLayout>
</template>

<style scoped>
.settings-container {
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 20px;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s ease;
}

.settings-container.loaded {
  opacity: 1;
  transform: translateY(0);
}

.settings-header {
  margin-bottom: 30px;
  text-align: center;
  animation: fadeIn 0.8s ease-out forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.page-title {
  font-size: 2.4rem;
  color: #333;
  margin-bottom: 10px;
}

.page-subtitle {
  color: #666;
  font-size: 1.1rem;
}

.settings-content {
  display: flex;
  gap: 30px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.settings-sidebar {
  width: 280px;
  background-color: #f8f9fa;
  padding: 20px 0;
  border-right: 1px solid #eee;
}

.sidebar-item {
  display: flex;
  align-items: center;
  padding: 15px 25px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  color: #555;
}

.sidebar-item i {
  margin-right: 15px;
  font-size: 1.1rem;
  width: 20px;
  text-align: center;
}

.sidebar-item:hover {
  background-color: #f0f9f6;
  color: #00c389;
}

.sidebar-item.active {
  background-color: #f0f9f6;
  color: #00c389;
  font-weight: 500;
}

.sidebar-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background-color: #00c389;
}

.settings-main {
  flex-grow: 1;
  padding: 30px;
}

.settings-section {
  animation: slideRight 0.5s ease-out forwards;
}

@keyframes slideRight {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.section-title {
  font-size: 1.5rem;
  color: #333;
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.form-group {
  margin-bottom: 25px;
}

label {
  display: block;
  font-size: 1rem;
  color: #555;
  margin-bottom: 10px;
  font-weight: 500;
}

input, select {
  width: 100%;
  height: 46px;
  padding: 0 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.3s, box-shadow 0.3s;
}

input:focus, select:focus {
  border-color: #00c389;
  box-shadow: 0 0 0 2px rgba(0, 195, 137, 0.2);
  outline: none;
}

.hint {
  font-size: 0.85rem;
  color: #888;
  margin-top: 8px;
}

.mt-3 {
  margin-top: 12px;
}

.save-btn {
  padding: 12px 30px;
  background-color: #00c389;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 10px;
}

.save-btn:hover {
  background-color: #00b07b;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 195, 137, 0.3);
}

.toggle-group {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.toggle-group:hover {
  background-color: #f0f9f6;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.toggle-switch {
  position: relative;
  width: 50px;
  height: 24px;
  margin-right: 15px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-switch label {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ddd;
  border-radius: 24px;
  cursor: pointer;
  transition: 0.4s;
}

.toggle-switch label:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  border-radius: 50%;
  transition: 0.4s;
}

.toggle-switch input:checked + label {
  background-color: #00c389;
}

.toggle-switch input:checked + label:before {
  transform: translateX(26px);
}

.notification-group {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.notification-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background-color: #f8f9fa;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.notification-item:hover {
  background-color: #f0f9f6;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.notification-info h3 {
  font-size: 1.1rem;
  color: #333;
  margin-bottom: 5px;
}

.notification-info p {
  font-size: 0.9rem;
  color: #666;
}

@media (max-width: 992px) {
  .settings-content {
    flex-direction: column;
  }
  
  .settings-sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #eee;
    padding: 0;
  }
  
  .sidebar-item {
    padding: 15px 20px;
  }
  
  .sidebar-item.active::before {
    width: 0;
    height: 3px;
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
  }
}

@media (max-width: 768px) {
  .settings-main {
    padding: 20px;
  }
  
  .toggle-group {
    flex-direction: column;
    gap: 15px;
  }
}
</style> 